<script setup lang="ts">
import {NImageGroup, NImage, NSpace} from "naive-ui";

defineProps({
  images: {
    type: Array as unknown as () => [],
    required: true,
    default: Array as unknown as () => []
  }
})

const thumb = (src: string, size: '0x110' | '0x800') => {
  return src
      .replace(/0x0/, size); // Replace '0x0' with the specified size
}
</script>

<template>
  <n-image-group>
    <n-space>
      <n-image v-for="(item, index) in images" :key="index"
               lazy
               width="100"
               :src="thumb(item, '0x110')"
               :preview-src="thumb(item, '0x800')"
      />
    </n-space>
  </n-image-group>
</template>

<style scoped lang="scss">

</style>